<template> 
  <Navbar class="detailNavbar">
    <div slot="nav_left" class="detailBack" @click="backClick">
      <img src="~assets/img/common/back.svg">
    </div>

    <div slot="nav_center" class="detailNavs">
      <span v-for="(item,index) in detailNav" 
      :key="item" 
      @click="detail_itemclick(index)"
      :class="{Active: currentIndex == index}">{{item}}</span>

    </div>
  </Navbar> 
</template>

<script>
import Navbar from "components/common/navbar/Navbar";
export default {
  name: "DetailNavbar",
  data(){
    return {
      detailNav: ["商品","详情","评论","推荐"],
      currentIndex: 0
    }
  },
  components: {
    Navbar,
  },
  methods: {
    backClick(){
      this.$router.back();
    },
    detail_itemclick(index){
      this.currentIndex = index;
      // console.log(this.currentIndex);
      this.$emit("detail_top_click",index);
    }
  }
}
</script>

<style scoped>
  .detailNavbar{
    background-color: #f6f6f6;
  }
  .detailBack{
    margin-top: 7px;
    margin-right: 15px;
  }

  .detailNavs{
    display: flex;
    font-size: 15px;
    color: grey;
    justify-content: space-around;
  }

  .detaliNavs span{
    flex: 1;
  }

  .Active{
    color: red;
  }
</style>